<template>
	<div id="modify">
		<input type="text" v-model="name" placeholder="姓名" /><br />
		<input type="number" v-model.number="age" placeholder="年龄" /><br />
		<textarea v-model="sign" placeholder="个性签名"></textarea><br />
		<button @click="modifyAction()">确认修改</button>
		<button @click="cancelAction()">取消</button>
	</div>
</template>

<script>
export default {
	name: "modify-com",
	data(){
		return {
			name: "",
			age: "",
			sign: "",
			oindex: -1
		}
	},
	methods:{
		modifyAction(){
			this.center.$emit("modifytolist",{
				name: this.name,
				age: this.age,
				sign: this.sign,
				index: this.oindex
			})
			this.cancelAction()
		},
		cancelAction(){
			this.name = "";
			this.age = "";
			this.sign = "";
			this.oindex = -1
			this.center.$emit("modifytoApp")
		}
	},
	created(){
		this.center.$on("listtomodify",(data)=>{
			this.name = data.name;
			this.age = data.age;
			this.sign = data.sign;
			this.oindex = data.index;
		})
	}
}
</script>

<style>
#modify{
	border: 2px solid #222222;
}
</style>